<template>
  <main class="bg" :class="{'self-bg-color':isSelfBgColor,'inqu-bg-color':isInquBgColor}">
    <!--路由切换开始-->
    <header class="flex header">
      <router-link to="/self" @click.native="isToggle" tag="h3">我的补偿记录</router-link>
      <router-link to="/other" @click.native="isToggle" tag="h3">其他旅客查询</router-link>
    </header>
    <!--路由切换结束-->

    <!--路由匹配到的组件将渲染在这里-->
    <keep-alive>
      <router-view />
    </keep-alive>
  </main>
</template>

<script>
export default {
  data () {
    return {
      isSelfBgColor: true, // 自主查询
      isInquBgColor: false // 其他旅客查询
    }
  },
  methods: {
    isToggle () {
      let hash = document.location.hash
      if (hash.indexOf('#/') > -1) {
        if (hash.split('/')[1] === 'self') {
          this.isSelfBgColor = true
          this.isInquBgColor = false
          document.title = '我的补偿记录'
        } else {
          this.isInquBgColor = true
          this.isSelfBgColor = false
          document.title = '其他旅客查询'
        }
      }
      console.log(21321312132)
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'assets/scss/public/public.scss';
@import 'assets/scss/public/var.scss';
@include flex(space-between, center);
.bg {
  height: 100%;
}
.self-bg-color {
  background: $colorWhite1;
}
.inqu-bg-color {
  background: $colorWhite1;
}
.header {
  @extend .fixed;
  background: $colorWhite;
  width: calc(100%);
  position: fixed;
  padding: 0 .4rem;
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;
  h3 {
    width: 50%;
    text-align: center;
    font-weight: normal;
    line-height: 2rem;
    font-size: .8rem;
    box-sizing: border-box;
    padding: 0 0.4rem;
    position: relative;
    top: .055rem;
    margin: 0;
  }
}
.router-link-active {
  border-bottom: .1rem solid $colorRed !important;
  color: $colorRed;
}
</style>
